<div class="page-title clearfix">
  <div class="title">充值/扣除</div>
</div>

<div class="panel panel-body">
  <form nz-form [formGroup]="validateForm" class="form-wrap pt-30">

    <!--用户账号 start-->
    <nz-form-item>
      <nz-form-label [nzSm]="5" nzFor="account" nzRequired>用户账号</nz-form-label>
      <nz-form-control [nzSm]="8">
        <input nz-input formControlName="account" id="account" type="text" placeholder="用户账号">
        <nz-form-explain
          *ngIf="getFormControl('account').dirty&&getFormControl('account').hasError('required')">
          请填写用户账号
        </nz-form-explain>
      </nz-form-control>
      <nz-form-control [nzSm]="10">
        <button nz-button [nzType]="'default'" type="button" nzSize="small" class="ml-20 mr-20 btn-blue-o" [nzLoading]="isOkLoading" (click)="getAccount()">查看用户名</button>
        <div class="inline-block">用户名：<span class="color-theme" [ngClass]="{'color-gray':!realName}">{{realName || '[未找到]'}}</span></div>
      </nz-form-control>
    </nz-form-item>

    <!--充值类型 start-->
    <nz-form-item>
      <nz-form-label [nzSm]="5" nzFor="type" nzRequired>充值类型</nz-form-label>
      <nz-form-control [nzSm]="15">
        <nz-radio-group formControlName="type" id="type">
          <label nz-radio *ngFor="let item of rechargeType" [nzValue]="item.key">{{item.val}}</label>
        </nz-radio-group>
        <nz-form-explain *ngIf="getFormControl('type').dirty&&getFormControl('type').hasError('required')">
          请选择充值类型
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item>

    <!--充值类型 start-->
    <nz-form-item>
      <nz-form-label [nzSm]="5" nzFor="type" nzRequired>充值数量</nz-form-label>
      <nz-form-control [nzSm]="15">
        <input nz-input formControlName="num" id="num" type="number" placeholder="充值数量">
        <nz-form-explain *ngIf="getFormControl('num').dirty&&getFormControl('num').hasError('required')">
          请填写充值数量
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item>

    <!--表单底部start-->
    <nz-form-item class="action-button">
      <nz-form-control class="text-center">
        <button nz-button [nzType]="'primary'" type="button" class="pl-30 pr-30 mr-20"
                [nzLoading]="isConfirmLoading" nz-popconfirm nzTitle="确定充值吗？"
                nzOkText="确定" nzCancelText="取消" (nzOnConfirm)="recharge()">充值
        </button>
        <button nz-button [nzType]="'danger'" type="button" class="mr-20 btn-danger"
                [nzLoading]="isDeductLoading" nz-popconfirm nzTitle="确定扣除吗？"
                nzOkText="确定" nzCancelText="取消" (nzOnConfirm)="deduct()">扣除
        </button>
      </nz-form-control>
    </nz-form-item>
    <!--表单底部end-->
  </form>
</div>
